<template>
    <el-form label-width="auto" :model="searchForm.re">
        <el-row>
            <el-col :span="4">
                <el-form-item label="卡号/手机号:">
                    <el-input v-model="searchForm.re.memberCode" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="卡类型:">
                    <el-select v-model="searchForm.re.ticketClassType" filterable clearable>
                        <el-option v-for="item in cardType_options.re" :memberCode="item.code" :value="item.code"
                            :label="item.name" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="交易门店:">
                    <el-input v-model="searchForm.re.consumeOrgName" clearable />
                </el-form-item>
            </el-col>
            <!-- <el-col :span="5">
                <el-form-item label="交易类型:">
                    <el-select v-model="searchForm.re.typeCode" filterable clearable>
                        <el-option v-for="item in cardType_options.re" :memberCode="item.code" :value="item.code"
                            :label="item.name" />
                    </el-select>
                </el-form-item>
            </el-col> -->
            <el-col :span="5">
                <el-form-item label="券类型:">
                    <el-select v-model="searchForm.re.typeCode" filterable clearable>
                        <el-option v-for="item in ticketType_options.re" :memberCode="item.code" :value="item.code"
                            :label="item.name" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="券状态:">
                    <el-select v-model="searchForm.re.ticketState" filterable clearable>
                        <el-option v-for="item in ticketState_options.re" :memberCode="item.code" :value="item.code"
                            :label="item.name" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="交易时间:">
                    <el-date-picker v-model="searchForm.re.operDate" type="datetimerange" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="3" class="action-btn-box">
                <el-button type="primary" style="margin-left: 20px;" @click="handleSearch">搜索</el-button>
                <el-button class="reset-btn" @click="handleReset">清空筛选</el-button>
            </el-col>
        </el-row>
    </el-form>
    <el-table :data="tableData.re" stripe style="width: 100%;">
        <el-table-column prop="memberCarCode" label="会员卡号" :min-width="tableColumnWidth" align="center"/>
        <el-table-column prop="ticketName" label="券名称" :min-width="tableColumnWidth2" align="center"/>
        <el-table-column prop="code" label="券号" :min-width="tableColumnWidth" align="center"/>
        <el-table-column prop="typeCodeName" label="券类型" :min-width="tableColumnWidth" align="center"/>
        <el-table-column prop="ticketStateName" label="券状态" :min-width="tableColumnWidth" align="center"/>
        <el-table-column prop="getTicketDate" label="获取时间" :min-width="tableColumnWidth2" align="center">
            <template #default="scope">
                {{ scope.row.getTicketDate ? (dayjs(scope.row.getTicketDate).format('YYYY-MM-DD HH:mm:ss')) : "" }}
            </template>
        </el-table-column>
        <el-table-column prop="" label="有效期" :min-width="tableColumnWidth2" align="center">
            <template #default="scope">
                {{ scope.row.startData && scope.row.endData ?
                    `${dayjs(scope.row.startData).format('YYYY-MM-DD')}~${dayjs(scope.row.endData).format('YYYY-MM-DD')} ` :
                    "" }}
            </template>
        </el-table-column>
        <el-table-column prop="memberCarName" label="卡名称" :min-width="tableColumnWidth2" align="center"/>
        <el-table-column prop="memberMobile" label="手机号" :min-width="tableColumnWidth" align="center"/>
        <el-table-column prop="MemberCardTypeName" label="卡类别" :min-width="tableColumnWidth" align="center">
            <!-- <template #default="scope">
                {{ format_cardTypeName(scope.row.memberCardType) }}
            </template> -->
        </el-table-column>
        <el-table-column prop="operDate" label="交易时间" :min-width="tableColumnWidth2" align="center">
            <template #default="scope">
                {{ scope.row.consumeDate ? (dayjs(scope.row.consumeDate).format('YYYY-MM-DD HH:mm:ss')) : "" }}
            </template>
        </el-table-column>
        <el-table-column prop="consumeOrgName" label="交易门店" :min-width="tableColumnWidth2" align="center"/>
        
        <!-- <el-table-column prop="" label="交易类型" /> -->
        <el-table-column fixed="right" label="操作" :min-width="tableColumnWidth" align="center">
            <template #default="scope">
                <div v-if="scope.row.typeCodeName != '免排队券'">
                    <el-button style="border: 1px solid #ff6a00;color: #ff6a00;;background: none;" v-if="scope.row.ticketStateName == '已使用'" type="primary" size="small" @click="handleOrder(scope.row)">
                    查看订单
                   </el-button>
                </div>
                <div v-else>
                    <el-button style="border: 1px solid #ff6a00;color: #ff6a00;;background: none;" v-if="scope.row.ticketStateName == '已使用'" type="primary" size="small" @click="handlerevoke(scope.row)">
                     撤销
                   </el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <div class="orderRecords-container-footer">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next,sizes, jumper"
            :total="total">
        </el-pagination>
        <button class="footer-button">确定</button>
    </div>
</template>

<script setup>

import Api from '@/api'
import dayjs from "dayjs"
import ls from '@/lib/ls'
import { ElNotification } from 'element-plus'

const router = useRouter()
const props = defineProps({
    user: {
        type: Object,
        // default: () => ({})
    },
    currentCard: {
        type: Number,
        // default: null,
    },
})
// let { user, currentCard } = props;
const tableColumnWidth = ref('120')
const tableColumnWidth2 = ref('200')
window.addEventListener("resize",readerSize)
function readerSize (){
    if(window.innerWidth >= 1200){
        tableColumnWidth.value = '120'
        tableColumnWidth2.value = '200'
        //  tableColumnaction.value = '60'
    }else if(window.innerWidth >= 700 && window.innerWidth < 1200){
        tableColumnWidth.value = '90'
        tableColumnWidth2.value = '160'
    }else if(window.innerWidth >= 400 && window.innerWidth < 700){
        tableColumnWidth.value = '40'
        tableColumnWidth2.value = '90'
    } 
}
// 获取会员卡类型OPTIONS
let cardType_options = reactive({ re: [] })
const get_cardType_options = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "orgCode": "0004", "contentData": { parentCode: '571' } }).then(res => {
        console.log('获取会员卡类型OPTIONS res :>> ', res,);
        cardType_options.re = res.result
    })
}

const format_cardTypeName = (code) => {
    const arr = [
        { code: "1", name: "品牌卡" },
        { code: "2", name: "门店卡" },
        { code: "3", name: "联盟卡" },
    ]
    let name = ""
    arr.forEach(item => {
        if (item.code == code) {
            name = item.name
        }
    });
    return name
}

// 获取券类型OPTIONS
let ticketType_options = reactive({ re: [] })
const get_ticketType_options = (params) => {
    ticketType_options.re = [
        { code: "1", name: "优惠券" },
        { code: "2", name: "折扣券" },
        { code: "3", name: "兑换券" },
        { code: "4", name: "排队券" },
    ]
}

// 获取券状态OPTIONS
let ticketState_options = reactive({ re: [] })
const get_ticketState_options = (params) => {
    ticketState_options.re = [
        { code: "1", name: "未使用" },
        { code: "2", name: "已使用" },
        { code: "3", name: "已过期" },
    ]
}

onMounted(() => {
    get_cardType_options()
    get_ticketType_options()
    get_ticketState_options()
})
let searchForm = reactive({ re: [{}] })
// 搜索
const handleSearch = (params) => {
    currentPage.value = 1;
    getTableData();
}
// 重置
const handleReset = (params) => {
    searchForm.re = {}
    handleSearch()
}
// 查询表格数据
let tableData = reactive({ re: [] })
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getTableData()
}
const getTableData = (user, currentCard) => {
    if (user) {
        searchForm.re.memberCode = user.cardList[currentCard].cardNo
    }
    let query = {
        ...searchForm.re,
        pageIndex: currentPage.value,
        pageSize: pageSize.value
    }
    if (query.operDate && query.operDate.length > 1) {
        query.consumeDateStart = query.operDate[0]
        query.consumeDateEnd = query.operDate[1]
    }
    console.log('查询前的query :>> ', query,);
    Api.Common.PcObjProcess.Do({ "functionName": "GetMemberTicket", "orgCode": "0004", "contentData": query }).then(res => {
        console.log('查询会员充值记录 res :>> ', res,);
        tableData.re = res.data
        total.value = res.totalCount
    })
}
// 暴露方法
defineExpose({ getTableData })

// 点击详情
const handleOrder = (item) => {
    console.log('item :>> ', item);
    item.referCode = ""
    ls.set('TABLE_BTN', 1)
    ls.set('TABLE_INFO', item)
    router.push({
        path: '/order/orderTable',
    })
}

// 撤销
const handlerevokeFlag = ref(false)
const handlerevoke = (v) => {
    if(handlerevokeFlag.value){
        ElNotification({
          title: '提示',
          message: '加载中，请稍等',
          type: 'warning',
        })
        return
    }
    handlerevokeFlag.value = true
    Api.Common.PcObjProcess.Do({ "functionName": "ForceCancelUseTicket", "orgCode": "0004", "contentData": {"code":v.code} }).then(res => {
        console.log('查询会员充值记录 res :>> ', res,);
        ElNotification({
          title: '提示',
          message: '撤销成功',
          type: 'success',
        })
        handleSearch()
        handlerevokeFlag.value = false
    }).catch(err=>{
        handlerevokeFlag.value = false
    })
}


</script>

<style scoped lang="scss">
/* 在这里编写组件的CSS样式 */
// .app-container {}
// .action-btn-box {

//     button {
//         // width: 120px;
//         // height: 40px;
//         line-height: 40px;
//         background: #FFE566;
//         border-radius: 8px;
//         border: 0;
//         font-size: 16px;
//         color: #212121;
//     }

//     .reset-btn {
//         background: #E6E6E6;
//         color: #666666;
//     }
// }


::v-deep {
    .el-form-item__label {
      line-height: 40px;
    }

    .el-input__wrapper {
      // width: 200px;
      height: 40px;
      background: #FFFFFF;
      border-radius: 8px;
    }

    .el-select__wrapper {
      height: 40px;
      background: #FFFFFF;
      border-radius: 8px;
    }

    .el-checkbox {
      height: 40px;
    }

    .el-checkbox__inner {
      width: 20px;
      height: 20px;
      border: 2px solid #666666;
      border-radius: 4px;
      background: #F9F9F9;
    }

    .is-checked {
      .el-checkbox__label {
        color: #FF6A00;
      }

      .el-checkbox__inner {
        background: #F9F9F9;
      }

      .el-checkbox__inner {
        width: 20px;
        height: 20px;
        border: 2px solid #FF6A00;
        border-radius: 4px;
        // background: #FF6A00;
      }

      .el-checkbox__inner::after {
        border: 2px solid #FF6A00;
        border-left: 0;
        border-top: 0;
        left: 7px;
        top: 4px;
      }
    }
  }

// .action-btn-box {
//     button {
//         // width: 120px;
//         // height: 40px;
//         line-height: 40px;
//         background: #FFE566;
//         border-radius: 8px;
//         border: 0;
//         font-size: 16px;
//         color: #212121;
//     }

//     .reset-btn {
//         background: #E6E6E6;
//         color: #666666;
//     }
// }


  .action-btn-box {
    
    display: flex;
    justify-content: space-between;

    button {
      width: 120px;
      height: 48px;
      line-height: 48px;
      background: #FFE566;
      border-radius: 8px;
      border: 0;
      font-size: 16px;
      color: #212121;
    }

    .reset-btn {
      background: #E6E6E6;
      color: #666666;
    }
  }

.dialog-box {
    ::v-deep {
        .el-dialog {
            width: 450px !important;
            // height: 40px!important;
            border-radius: 16px;
        }
    }
}

.content-box {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    color: #212121;
    line-height: 36px;
}

.footer-box {
    margin-top: 0px;
    display: flex;
    justify-content: center;

    .cancel {
        width: 160px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        font-size: 24px;
        color: #FF6A00;
    }

    .submit {
        width: 160px;
        height: 60px;
        background: #FF6A00;
        border-radius: 8px;
        font-size: 24px;
        color: #FFFFFF;
        margin-left: 30px;
    }
}

::v-deep .el-table .cell {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 0.07292rem;
    color: #666666;
    line-height: 0.07292rem;
    border: none;
}

 ::v-deep {
    .el-table__inner-wrapper::before {
      height: 0px;
    }


    .el-table th {
      font-size: 13px;
      font-weight: 700;
    }

    .el-table__header th,
    .el-table__header tr,
    .el-table__header td {
      height: 48px;
      border: none;
      background: #F9F9F9;
    }
  }
    .el-table--fit {
    height: 400px;
  }
</style>
